<template>
  <header>
    <div class="fenlei">
      <img src="@/assets/images/fenlei.png" alt="" />
    </div>
    <div class="search" @click="goSearch">
      <span class="icon iconfont icon-fangdajing"></span>
      <span>搜索</span>
    </div>
    <div class="liaotian">
      <span class="icon iconfont icon-liaotian" @click="goCart"></span>
    </div>
  </header>
</template>

<script setup>
import '@/assets/css/iconfont.css'
import '@/assets/js/iconfont.js'
import { useRouter } from 'vue-router'

import { defineComponent } from 'vue'
const header = defineComponent({
  name: 'Header',
  // 组件的其他选项...
})
const router = useRouter()
const goSearch = () => {
  router.push('/search')
}

const goCart = () => {
  router.push('/cart')
}
</script>

<style>
header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 1.235rem;
  padding: 0.2rem 0.15rem;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}

header .fenlei img {
  width: 0.6rem;
  height: 0.6rem;
  line-height: 0.8rem;
  margin-top: 0.188rem;
}

header .search {
  width: 7rem;
  height: 0.835rem;
  font-size: 0.4rem;
  color: #999;
  background-color: #eee;
  border-radius: 0.125rem;
}

header .search span {
  margin: 0 0.2rem;
  line-height: 30px;
}

header .liaotian span {
  font-size: 0.7rem;
  color: #999;
}
</style>
